<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- 툴팁 설정 -->
<div class="ddp-ui-chart-side ddp-show">

  <div class="ddp-ui-side-title">
    {{'msg.page.ui.data.tooltip.title' | translate}}
  </div>
  <div class="ddp-wrap-downmenu">
    <div class="ddp-box-down">
      <!-- divide -->
      <div class="ddp-divide2 ">
        <div class="ddp-list-label">{{'msg.page.chart.datalabel.display.label' | translate}}</div>
        <div class="ddp-list-sub2">
          <div class="ddp-part-check-b">
            <label class="ddp-label-checkbox ddp-check-full">
              <input type="checkbox" [ngModel]="returnMapTooltip('LAYER_NAME')"
                     (click)="toggleDisplayType('LAYER_NAME', 17)">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">{{'msg.page.chart.datalabel.map.layer.name' | translate}}</span>
            </label>
          </div>
          <div class="ddp-part-check-b">
            <label class="ddp-label-checkbox ">
              <input type="checkbox" [ngModel]="returnMapTooltip('LOCATION_INFO')"
                     (click)="toggleDisplayType('LOCATION_INFO', 18)">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">{{'msg.page.chart.datalabel.map.geo.info' | translate}}</span>
            </label>
          </div>
          <div class="ddp-part-check-b">
            <label class="ddp-label-checkbox">
              <input type="checkbox" [ngModel]="returnMapTooltip('DATA_VALUE')"
                     (click)="toggleDisplayType('DATA_VALUE', 19)">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">{{'msg.page.chart.datalabel.map.data.value' | translate}}</span>
            </label>
          </div>
          <!-- 데이터 값 -->
          <div class="ddp-data-value" *ngIf="returnMapTooltip('DATA_VALUE')">

            <ul class="ddp-list-datavalue">
              <li *ngFor="let item of selectedLayerItems; let index = index">
                <span class="ddp-data-value">
                 <!--

                    em.ddp-icon-dimension-ab
                    em.ddp-icon-dimension-local
                    em.ddp-icon-dimension-calen
                    em.ddp-icon-dimension-sharp
                    em.ddp-icon-dimension-float
                    em.ddp-icon-dimension-tf
                    em.ddp-icon-dimension-account
                    em.ddp-icon-dimension-maplink
                    em.ddp-icon-dimension-int
                    em.ddp-icon-dimension-latitude
                    em.ddp-icon-dimension-longitude
                    em.ddp-icon-dimension-array
                    em.ddp-icon-measure-ab
                    em.ddp-icon-measure-local
                    em.ddp-icon-measure-calen
                    em.ddp-icon-measure-sharp
                    em.ddp-icon-measure-float
                    em.ddp-icon-measure-tf
                    em.ddp-icon-measure-account
                    em.ddp-icon-measure-maplink
                    em.ddp-icon-measure-int
                    em.ddp-icon-measure-latitude
                    em.ddp-icon-measure-longitude
                    em.ddp-icon-measure-array
                 -->
                  <!-- string -->
                  <em class="ddp-icon-dimension-ab" *ngIf="(item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'STRING') || item?.type === 'user_expr'"></em>
                  <!-- //string -->
                  <!-- latitude / longitude -->
                  <em class="ddp-icon-dimension-local" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'LNG' || item.field?.logicalType?.toString() === 'LNT'"></em>
                  <!-- //latitude / longitude -->
                  <!-- time -->
                  <em class="ddp-icon-dimension-calen" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'TIMESTAMP'"></em>
                  <!-- //time -->
                  <!-- number -->
                  <em class="ddp-icon-measure-float" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'DOUBLE' || item.field?.logicalType?.toString() === 'INTEGER'"></em>
                  <!-- //number -->
                  <!-- boolean -->
                  <em class="ddp-icon-dimension-tf" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'BOOLEAN'"></em>
                  <!-- //boolean -->
                  <!-- polygon -->
                  <em class="ddp-icon-dimension-polygon ddp-icon-map-view" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'GEO_POLYGON'"></em>
                  <!-- //polygon -->
                  <!-- line -->
                  <em class="ddp-icon-dimension-line ddp-icon-map-view" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'GEO_LINE'"></em>
                  <!-- //line -->
                  <!-- point -->
                  <em class="ddp-icon-dimension-point ddp-icon-map-view" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'GEO_POINT'"></em>
                    {{returnDataValueName(item)}}
                </span>
                <em class="ddp-icon-listdelete" (click)="deleteSelectedField(index)"></em>
              </li>
              <!-- ddp-selected 추가시 popup 열림 -->
              <li class="ddp-add" (clickOutside)="$event.stopPropagation(); this.addColumnShowFl=false;" (click)="toggleAddColumn()"
                  [ngClass]="{'ddp-selected' : addColumnShowFl && uiOption?.toolTip?.displayTypes.indexOf(uiChartDataLabelDisplayType.DATA_VALUE) != -1}">
                <span class="ddp-data-value">
                    {{'msg.page.chart.datalabel.map.add.column'| translate}}
                </span>
                <em class="ddp-icon-plus"></em>
              </li>
            </ul>

            <div [style.display]="addColumnShowFl && uiOption?.toolTip?.displayTypes.indexOf(uiChartDataLabelDisplayType.DATA_VALUE) != -1 ? 'block' : 'none'" class="ddp-box-layout4">
              <!-- search -->
              <div class="ddp-form-search">
                <em class="ddp-icon-search"></em>
                <input type="text" [(ngModel)]="searchText" (keyup.enter)="returnSearchFields()" placeholder="{{'msg.bench.ui.search' | translate}}">
                <em class="ddp-btn-search-close" (click)="initSearchFields()"></em>
              </div>
              <!-- //search -->
              <div class="ddp-ui-list-type ddp-types">
                <ul class="ddp-list-typebasic ddp-list-popup">
                  <!-- empty -->
                  <li *ngIf="unselectedLayerItems?.length == 0"><a href="javascript:">{{'msg.page.chart.map.tooltip.search.no.column' | translate}}</a></li>
                  <!-- //empty -->
                  <li *ngFor="let item of unselectedLayerItems" (click)="addColumn(item)">
                    <a href="javascript:">
                      <!-- string -->
                      <em class="ddp-icon-dimension-ab" *ngIf="(item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'STRING') || item?.type === 'user_expr'"></em>
                      <!-- //string -->
                      <!-- latitude / longitude -->
                      <em class="ddp-icon-dimension-local" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'LNG' || item.field?.logicalType?.toString() === 'LNT'"></em>
                      <!-- //latitude / longitude -->
                      <!-- time -->
                      <em class="ddp-icon-dimension-calen" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'TIMESTAMP'"></em>
                      <!-- //time -->
                      <!-- number -->
                      <em class="ddp-icon-measure-float" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'DOUBLE' || item.field?.logicalType?.toString() === 'INTEGER'"></em>
                      <!-- //number -->
                      <!-- boolean -->
                      <em class="ddp-icon-dimension-tf" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'BOOLEAN'"></em>
                      <!-- //boolean -->
                      <!-- polygon -->
                      <em class="ddp-icon-dimension-polygon ddp-icon-map-view" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'GEO_POLYGON'"></em>
                      <!-- //polygon -->
                      <!-- line -->
                      <em class="ddp-icon-dimension-line ddp-icon-map-view" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'GEO_LINE'"></em>
                      <!-- //line -->
                      <!-- point -->
                      <em class="ddp-icon-dimension-point ddp-icon-map-view" *ngIf="item?.type !== 'user_expr' && item.field?.logicalType?.toString() === 'GEO_POINT'"></em>
                      <span class="ddp-txt-name">{{returnDataValueName(item)}}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- //데이터 값 -->
        </div>
      </div>
      <!-- //divide -->
    </div>
  </div>
</div>
<!-- //툴팁 설정 -->
